<template>
  <el-dialog width="70%" :close-on-click-modal="false" :visible.sync="visible" :append-to-body="true">
    <div class="choosetheformat">
      <div class="container" v-loading="dataListLoading">
        <el-tabs v-model="dataForm.formatState" type="card" @tab-click="handleClick">
          <el-tab-pane label="酒店" name="0"></el-tab-pane>
        </el-tabs>
        <el-card class="box-card" style="width: 100%;">
          <div slot="header" class="clearfix">
            <span>门店列表</span>
            <span class="el-icon-refresh" style="cursor: pointer;" @click="init"></span>
            <el-button @click="creatStoresHandle" v-if="dataList.length != 0" style="float: right; padding: 3px 0" type="text">新建门店</el-button>
            <el-form style="margin-top: 10px;" :inline="true" :model="dataForm" class="demo-form-inline">
              <el-form-item label-width="0">
                <el-input v-model="dataForm.key" placeholder="名称/联系人/电话/地址"></el-input>
              </el-form-item>
              <el-form-item>
                <el-button type="primary" @click="getDataList">查询</el-button>
              </el-form-item>
              <el-form-item>
                <el-button type="primary" @click="adminSeller" v-if="adminShow">进入总部</el-button>
              </el-form-item>
            </el-form>
          </div>
          <div v-if="dataList.length == 0" style="text-align: center;">
            <i class="el-icon-document" style="font-size: 50px;margin: 28px 0px 18px 0px;"></i>
            <p style="margin-bottom: 18px;">空空如也，<el-button @click="creatStoresHandle" type="text">立即创建</el-button>
            </p>
          </div>
          <el-row>
            <el-col :span="10" v-for="(item,index) in dataList" :key="index" :offset="index % 2 == 0 ? 1 : 2" style="margin-bottom: 20px;">
              <el-card shadow="hover" :body-style="{ padding: '0px' }">
                <el-row :gutter="20">
                  <el-col :span="8">
                    <div style="overflow: hidden;height: 100px;margin: 10px;">
                      <img :src="item.ewmLogo" class="image" v-if="item.ewmLogo">
                      <img src="../../../assets/img/no-img1.png" class="image" v-else>
                    </div>
                  </el-col>
                  <el-col :span="16">
                    <div style="padding: 14px;">
                      <span>{{item.name}}</span>
                      <div class="bottom clearfix">
                        <p class="time">{{ item.address }}</p>
                        <!-- 1待审核,2通过，3拒绝-->
                        <el-button type="text" class="button" v-if="item.state == 2" @click="selectSeller(item)">切换</el-button>
                        <el-button type="text" class="button" v-if="item.state == 1" disabled>待审核</el-button>
                        <el-popover v-if="item.state == 3" placement="top" trigger="hover" width="160">
                          <p style="line-height: 20px;margin-bottom: 10px;">{{item.stateMsg ? item.stateMsg : '暂无原因'}}</p>
                          <div style="text-align: right;">
                            <el-button type="primary" size="mini" @click="againSubmit(item)">重新提交</el-button>
                          </div>
                          <el-button slot="reference" type="text" class="button" v-if="item.state == 3">
                            审核失败
                            <i class="el-icon-question"></i>
                          </el-button>
                        </el-popover>
                      </div>
                    </div>
                  </el-col>
                </el-row>
              </el-card>
            </el-col>
          </el-row>
        </el-card>

      </div>
      <!-- 创建门店-->
      <apply ref="apply" @refreshDataList="getDataList" v-if="applyVisible"></apply>
    </div>
  </el-dialog>
</template>


<script>
  import apply from './apply.vue'
  export default {
    data() {
      return {
        adminShow: false,
        visible: false,
        applyVisible: false,
        dataListLoading: false,
        dataForm: {
          key: "",
          formatState: '0'
        },
        dataList: []
      };
    },
    components: {
      apply
    },
    mounted: function() {

    },
    methods: {
      handleClick(tab, event) {
        console.log(tab, event);
        this.getDataList();
      },
      againSubmit(item) {
        this.applyVisible = true
        this.$nextTick(() => {
          item = {
            ...item,
            sellerName: item.name,
            type: item.star,
            roomCount: 1
          }
          this.$refs.apply.init(item, 2)
        })
      },
      creatStoresHandle() {
        this.applyVisible = true
        this.$nextTick(() => {
          this.$refs.apply.init({}, 1)
        })
      },
      selectSeller(item) {
        this.$http({
          url: this.$http.adornUrl(`/sys/user/choose_the/${item.id}`),
          method: 'get',
          params: this.$http.adornParams({})
        }).then(({
          data
        }) => {
          if (data && data.code === 0) {
            this.visible = false
            this.$message({
              message: this.$t('Common.OperationSuccessful'),
              type: 'success',
              duration: 1500,
              onClose: () => {}
            })
            // this.$reloadRoute();
            this.$router.replace({
              name: "home"
            });
          } else {
            this.$message.error(data.msg);
          }
        })
      },
      adminSeller() {
        this.$http({
          url: this.$http.adornUrl(`/sys/user/choose_the/admin`),
          method: 'get',
          params: this.$http.adornParams({})
        }).then(({
          data
        }) => {
          if (data && data.code === 0) {
            this.visible = false
            this.$message({
              message: this.$t('Common.OperationSuccessful'),
              type: 'success',
              duration: 1500,
              onClose: () => {}
            })
            // this.$reloadRoute();
            this.$router.replace({
              name: "home"
            });
          } else {
            this.$message.error(data.msg);
          }
        })
      },
      init() {
        this.visible = true;
        this.getDataList();
      },
      getDataList() {
        this.dataListLoading = true
        this.$http({
          url: this.$http.adornUrl('/sys/user/choose_the_format'),
          method: 'get',
          params: this.$http.adornParams({
            'key': this.dataForm.key,
            'formatState': this.dataForm.formatState
          })
        }).then(({
          data
        }) => {
          if (data && data.code === 0) {
            this.adminShow = false;
            console.log(data)
            if (data.data.admin == 1) {
              this.dataList = data.data.list
              this.adminShow = true;
            } else {
              this.dataList = data.data.list
              console.log(this.dataList)
            }
          } else {
            this.dataList = []
          }
          this.dataListLoading = false
        })
      }
    }
  };
</script>

<style scoped>
  ul li {
    list-style-type: none;
  }

  .container {
    width: 1200px;
    margin: 0 auto;
  }

  #granted-hotels {
    margin-bottom: 1em;
  }

  #granted-hotels li {
    float: left;
    margin-left: 1em;
    margin-top: 20px;
  }

  #granted-hotels li a {
    background-color: #599bb3;
    border-radius: 15px;
    display: inline-block;
    cursor: pointer;
    color: #ffffff;
    font-size: 18px;
    font-weight: bold;
    padding: 32px 32px;
    text-decoration: none;
    text-shadow: 0px 1px 0px #3d768a;
  }

  .choosetheformat .time {
    font-size: 13px;
    width: 70%;
    line-height: 25px;
    color: #999;
  }

  .choosetheformat .bottom {
    margin-top: 13px;
    line-height: 12px;
  }

  .choosetheformat .button {
    padding: 0;
    float: right;
  }

  .choosetheformat .image {
    width: 100%;
    display: block;
  }

  .choosetheformat .clearfix:before,
  .choosetheformat .clearfix:after {
    display: table;
    content: "";
  }

  .choosetheformat .clearfix:after {
    clear: both
  }

  .choosetheformat .el-tabs__header.is-top {
    margin-bottom: 0;
  }

  .choosetheformat .el-card.box-card {
    border-top: none;
  }

  .choosetheformat .demo-form-inline .el-form-item {
    margin-bottom: 0px;
  }
  .el-popper {
      padding: 10px;
  }
</style>
